<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
  <title>Swiper Demo</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html {
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
    }
    .swiper-container {
      width: 100%;
      padding-top: 50px;
      padding-bottom: 50px;
    }
    .swiper-slide {
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      /* width: 300px; */
      height: 66.67vw;
    }

    .scale .swiper-slide {
      transform: scale(0.8) !important;
      transition: transform 0.3s;
    }
    .scale .swiper-slide-active, .swiper-slide-duplicate-active {
      transform: scale(1) !important;
	  }

    .flip.swiper-container {
      width: 66.67vw;
    }
  </style>
</head>
<body>
  <div class="swiper-container coverflow">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/1)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/2)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/3)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/4)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/5)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/6)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/7)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/8)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/9)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/10)"></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

  <div class="swiper-container scale">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/1)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/2)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/3)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/4)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/5)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/6)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/7)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/8)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/9)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/10)"></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

  <div class="swiper-container flip">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/1)"></div>
        <div class="swiper-slide swiper-no-swiping" style="background-image:url(http://lorempixel.com/600/600/nature/2)"></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
  <script>
    (function () {
      var swiper = new Swiper('.coverflow', {
        pagination: '.coverflow > .swiper-pagination',
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 1.5,
        coverflow: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows : true
        }
      });

      var swiper2 = new Swiper('.scale', {
        pagination: '.scale > .swiper-pagination',
        centeredSlides: true,
        slidesPerView: 1.5,
        onSlideChangeStart: function () {
          console.log('onSlideChangeStart')
        },
        onSlideChangeEnd: function () {
          console.log('onSlideChangeEnd')
        }
      });

      swiper2.slideTo(3);

      var swiper3 = new Swiper('.flip', {
        pagination: '.flip > .swiper-pagination',
        effect: 'flip',
        flip: {
          slideShadows : true,
          limitRotation : true
        }
      });
    })();
  </script>
</body>
</html>
